<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <!--1、引入vue-router.js文件，注意在vue.js之后引入-->
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--  6、添加超链接，完成url切换-->
    <!--  <a href="#/login">登入</a>-->
    <!--  6,使用router-link标签来实现路由变化-->
    <!--  使用查询字符串的方式 给路由传参，不需要修改path属性-->
    <router-link to="/login?id=123&name=admin" tag="span">登入</router-link>
    <!--  通过tag属性可以指定router-link标签展示的样式-->
    <router-link to="/register/123/admin" tag="button">注册</router-link>

    <!--  5、在页面添加占位符，将来路由规则匹配到的组件会展示在router-view中-->
    <router-view></router-view>
</div>
<template id="register">
    <div>
        <h3>注册</h3>
        <p>{{this.$route.params.id}}--{{this.$route.params.name}}</p>
        用户名：<input type="text" id="uName"><br/>
        密码：<input type="password" id="uPwd">
    </div>
</template>
<template id="login">
    <div>
        <h3>登入</h3>
        <!--    通过query属性获取传递的参数-->
        <p>{{this.$route.query.id}}--{{this.$route.query.name}}</p>
    </div>
</template>

<script>
    //3、创建组件模板对象
    var login={
        template:"#login"
    }
    var  Register={
        template:"#register"
    }
    //2，创建一个路由对象，定义路由匹配规则
     new VueRouter({
        routes:[
            //  前端重定向：当路径是"/"时，重定向到"/register"
            {path:"/",redirect:"/register/123/admin"},
            //  当路径为login时，展示的组件是login
            {path:"/login",component:login},
            //  "/register/:id/:name"意思是，当url为register且带有两个参数时，才会被匹配上
            {path:"/register/:id/:name",component:Register}
        ]
    })
    new Vue({
        el:"#app",
        data:{
            message:"你好"
        },
        //4,将路由规则对象注册到vue实例上，这样vue实例就能监听url的变化，然后展示不同的组件
        router:routerObj
    })
</script>
</body>
</html>
